import React, { PureComponent } from 'react';
import './App.less';
// import { inject, observer } from 'mobx-react'
import { renderRoutes } from 'react-router-config';
import { Button, Radio, Calendar } from 'antd';
import logo from '../logo.svg';
import user from '@/stores/user';

// @inject('global','language')
// @observer
class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // show2: false,
      // lang: 'zh-CN'
    };
    console.log(props);
  }

  componentDidMount() {
    user.setAge(10);
  }

  onChange = e => {
    console.log(e.target.value);
    // this.setState({ lang: e.target.value, show2: true });
    // this.props.language.setLang(e.target.value);
  };

  render() {
    const txt = user.labelText;
    const { route, language } = this.props;
    console.log(txt);
    return (
      <div className="App">
        {renderRoutes(route.routes)}
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Button type="primary">Button</Button>
          <Radio.Group onChange={this.onChange} defaultValue={language.lang}>
            <Radio.Button value="zh-CN">中文</Radio.Button>
            <Radio.Button value="en-US">English</Radio.Button>
          </Radio.Group>
          <div style={{ paddingTop: '10px' }}>
            <Calendar fullscreen={false} />
          </div>
          <p>
            <code>src/App.js</code>
          </p>
          <p>{txt}</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;
